<template>
  <div class="app-container">
    <u-page title="操作记录">
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="升级类型" prop="type">
            <el-select v-model="listQuery.type" placeholder="请选择模式" clearable class="upgrade">
              <el-option v-for="item in upordeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="新的等级" prop="newLevel">
            <level v-model="listQuery.newLevel" />
          </el-form-item>
          <el-form-item label="操作人" prop="createdBy">
            <el-input v-model="listQuery.createdBy" placeholder="请输入操作人" clearable />
          </el-form-item>
          <el-form-item label="操作时间" prop="searchDate">
            <u-date-time-picker v-model="searchDate" @change="changeSearchDate" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
        </el-form>

      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="hdlEdit(row)">详情</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>

    </u-page>

    <u-dialog title="记录详情" :show.sync="dialogFormVisible" :footer="false">

      <el-form ref="dialogForm" :model="dataForm" label-width="200px">

        <el-descriptions :column="2" border>
          <el-descriptions-item label="操作时间"> {{ dataForm.createdAt | date }}</el-descriptions-item>
          <el-descriptions-item label="操作人"> {{ dataForm.createdBy }}</el-descriptions-item>
          <el-descriptions-item label="升级类型"> {{ dataForm.typeName }}</el-descriptions-item>
          <el-descriptions-item label="新的等级"> {{ dataForm.newLevelName }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions  style="padding: 20px 0" border direction="vertical">
          <template slot="extra">
            <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
          </template>
          <el-descriptions-item label="处理名单">
            <template v-if="dataForm.content">

              <el-table
                :data="parsedData"
                style="width: 100%"

                header-align="center"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  width="180"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="memberId"
                  label="会员卡号"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  label="手机号"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="balance"
                  label="当前积分"
                  align="center"
                />
                <el-table-column
                  prop="deduction"
                  label="扣除积分"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="ack"
                  label="执行状态"
                  align="center"
                > </el-table-column>
              </el-table>
            </template>
          </el-descriptions-item>

        </el-descriptions>

      </el-form>
    </u-dialog>
  </div>
</template>
<script>
import level from '@/components/member/level'
export default {
  components: {
    level
  },
  data: function() {
    return {
      api: this.$u.api.PluginsUpgradeLog,
      // 表格
      columns: [
        {
          prop: 'type',
          label: '升级类型',
          render: (h, params) => {
            const { type, typeName } = params.row
            if (parseInt(type) === 1) {
              return h('el-tag', { props: { type: 'success' }}, typeName)
            } else {
              return h('el-tag', { props: { type: 'danger' }}, typeName)
            }
          }
        },
        {
          prop: 'newLevelName',
          label: '新的等级',
          render: (h, params) => {
            const { newLevelName } = params.row
            return h('el-tag', { props: { type: 'success' }}, newLevelName)
          }
        },
        {
          prop: 'createdAt',
          label: '操作时间',
          timestamp: true
        },
        {
          prop: 'createdBy',
          label: '操作人',
          formatter: (row, column) => {
            return row.createdBy === '' ? '系统处理' : row.createdBy
          }
        },
        {
          prop: 'note',
          label: '备注'
        }
      ],

      list: [],
      listLoading: false,
      listOptions: {
        mutiSelect: false, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 20,
        totalCount: 1,
        beginTime: '',
        endTime: '',
        type: '',
        newLevel: '',
        createdBy: ''
      },
      dialogFormVisible: false,
      dataForm: {},
      upordeList: [{ value: 1, label: '升级' }, { value: 0, label: '降级' }]
    }
  },
  created() {
    this.hdlList()
  },
  computed: {
    parsedData() {
      return JSON.parse(this.dataForm.content) // 将 JSON 字符串解析为对象
    }
  },
  methods: {
    // 导出数据
    handleDownload() {
      // 复制值
      const list = this.$u.deepClone(JSON.parse(this.dataForm.content))
      // 业务数据处理
      /* list.forEach(item => {
        this.$set(item, 'status', item.status === 0 ? '待付款' : item.status === 1 ? '已关闭' : item.status === 3 ? '已完成' : '')
        this.$set(item, 'creditFee', item.totalFee ? this.$u.amount.F2Y(item.totalFee) : '')
      }) */
      // 表头&表数据
      const tHeader = ['会员卡号', '手机号', '当前积分', '扣除积分', '执行状态']
      const filterVal = ['memberId', 'mobile', 'balance', 'deduction', 'ack']
      const data = list.map(v => filterVal.map(j => { return v[j] }))
      this.$u.exports.excel('操作记录', tHeader, data)
    }
  }
}
</script>
<style lang="scss" scoped>

::v-deep{
  .upgrade{
    display: inline-block;
    margin-right: -5px;
    .el-input{
      width:120px !important;
    }
    .el-input__inner{
      width:120px !important;
    }
    .el-input--suffix .el-input__inner{
      width:120px !important;
    }
    .el-input__icon{
      height:100%;
    }
  }
}
</style>

